.btn {
  width: 16rem;
  height: 4rem;
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  border: none;
  background-color: var(--color-primary);
  cursor: pointer;
  transition: 0.4s;

  &:hover {
    background-color: #f25807;
  }

  &:active {
    opacity: 0.8;
  }

  &.gray {
    background-color: #b0b0b0;

    &:hover {
      background-color: #757575;
    }
  }

  &.outlined {
    color: var(--color-primary);
    border: 0.1rem solid var(--color-primary);
    background-color: #fff;

    &:hover {
      color: #fff;
      background-color: var(--color-primary);
    }
  }

  &.small {
    width: 12rem;
    height: 3rem;
    font-size: 1.2rem;
  }

  &.disabled {
    opacity: 0.4;
    cursor: default;
  }
}
